
<style lang="scss" scoped>
.activity{
    position: relative;
    height: 500px;;
}
.img1{
    position:absolute;
}
.img2{
    position:absolute;
    right: 0;
    bottom: -130px
}
.txt{
    position:absolute;
    left:50%;
    color: #666;
    h3{
        color: #666;
        b{
            font-weight: 500;
            font-size: 50px;
        }
    }
    p{
        color: #999;
        font-size: 14px;
    }
    a{
        display: block;
        text-decoration:underline;
        margin-top:40px;
    }
} 
video{
    // width:100vh;
    position:absolute;
    z-index: 99999;
    display: none;
}
</style>
<template>
    <div class="activity">
        <a id="activity"></a>
        <div class="img1" @click="open_video">
            <img src="@/assets/box2_1.png" >
        </div>
        <div class="txt">
            <h3 style="margin-top: 60px;margin-bottom: 35px;"><b>99</b>元极速申请外观专利</h3>
            <p>新老用户都可领取自己专属的邀请码，</p>
            <p>邀请新用户注册，即可享用99元/件外观专利的活动价，</p>
            <p>最高可获得3个月99元外观申请资格！可以累计，不设封顶。</p>
            <router-link @click="TJ_event('视频模块-了解更多')" style="color:#33AC82" :to="{name:'activity',query:$route.query}">了解更多</router-link>
        </div>
        <img src="@/assets/box2_2.png" class="img2">
        <video @timeupdate="onresize"  @ended="close_video"  controls="controls" src="http://common.pizhigu.com/design.mp4"></video>
    </div>
    
</template>
<script>
export default {
    data(){
        return {
            video:null
        }
    },
    methods:{
        onresize(e){
            if(e.srcElement.clientWidth!=document.body.clientWidth){
                this.video.pause()
                this.video.style.display='none'
            }
        },
        close_video(){
            this.exitFullscreen()
        },
        open_video(){
            this.video.style.display='block'
            if (this.video .requestFullscreen) {
                this.video.requestFullscreen();
            } else if (this.video .mozRequestFullScreen) {
                this.video.mozRequestFullScreen();
            } else if (this.video .webkitRequestFullScreen) {
                this.video.webkitRequestFullScreen();
            }
            this.video.play()
        },
        exitFullscreen() {
            if(this.video.exitFullscreen){
                    document.exitFullscreen();
                }else if(document.mozExitFullscreen){
                    document.mozExcitFullscreen();
                }else if(document.webkitExitFullscreen){
                    document.webkitExitFullscreen();
                }else if(document.msExitFullscreen){
                    document.mskitExitFullscreen();    
            }
            this.video.pause()
            this.video.style.display='none'
        }
    },
    mounted(){
        this.video=document.querySelector('video')
    }
}
</script>

